<!--
 * @Date: 2022-08-04 16:29:35
 * @LastEditors: StavinLi
 * @LastEditTime: 2022-09-21 11:17:15
 * @FilePath: /Workflow/src/components/drawer/promoterDrawer.vue
-->
<template>
    <el-drawer :append-to-body="true" title="发起人" :visible.sync="promoterDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="savePromoter"> 
        
        <div class="list">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="iconfont icon-map-site-full icon"></i> 人员设置
            </div>
            <div class="top">
              <el-checkbox v-model="appoint">指定成员</el-checkbox>
              <el-button v-show="appoint" type="primary" class="btn_qx" size="small" @click="showDialog(1,0)">添加/修改成员</el-button>
              
            </div>
            <div class="list" v-show="appoint">
              
              <div class="personnel_box" >
                <el-tag class="tag_box" v-for="(item,index) in roleInfoList" :key="item.id">{{item.name}}</el-tag>
              </div>
              
            </div>

            <div class="top">
              <el-checkbox v-model="appoint1">指定角色</el-checkbox>
              <el-button v-show="appoint1" type="primary" class="btn_qx" size="small" @click="showDialog(1,1)">添加/修改角色</el-button>
            </div>
            <div class="list" v-show="appoint1">
              <div class="personnel_box" >
                <el-tag class="tag_box" v-for="(item,index) in roleInfoList1" :key="item.id">{{item.name}}</el-tag>
              </div>
            </div>

            <div class="top">
              <el-checkbox v-model="appoint2">指定部门</el-checkbox>
              <el-button v-show="appoint2" type="primary"  class="btn_qx" size="small" @click="showDialog(1,2)">添加/修改部门</el-button>
            </div>
            <div class="list" v-show="appoint2">
              <div class="personnel_box" >
                <el-tag class="tag_box"  v-for="(item,index) in roleInfoList2" :key="item.id">{{item.name}}</el-tag>
              </div>
            </div>
            
            <!-- <p class="lable_box1">审核模式</p>
            <div class="top">
              <el-radio v-model="auditMode" label="1">会签审核（全部审核通过才会通过）</el-radio>
              <el-radio v-model="auditMode" label="2">或签审核（一个审核通过就会通过）</el-radio>
            </div> -->
            <!-- <div class="list">
              <el-button type="primary" size="small" @click="showDialog(2)">添加/修改抄送人</el-button>
              <div class="personnel_box">
                <span v-for="(item,index) in makeUserList" :key="item.id">{{item.name}}</span>
              </div>
            </div> -->
          </el-card>
        </div>
       
      <div class="footer" v-if='!showZZ'>
          <el-button type="primary" @click="savePromoter">确 定</el-button>
          <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <div class="zz" v-if='showZZ'></div>
      <memberDialog ref="memberDialog" @selectList='selectListFun(arguments)' :type="type" :transmitIdList="idList" :roleInfoList="roleInfoList"></memberDialog>
      <roleDialog ref="role" @selectList='selectListFun2' :type="type" :diaType='diaType' :transmitIdList="roleIdList"></roleDialog>
      <personnelDialog ref="personnel" @selectList='selectListFun1' :type="type" :transmitIdList="idList1"></personnelDialog>
      
    </el-drawer>
</template>
<script>
import personnelDialog from '../dialog/personnelDialog.vue' // 角色
import roleDialog from '../dialog/roleDialog.vue' // 部门
import memberDialog from '../dialog/memberDialog.vue'  // 成员

import { mapState, mapMutations } from 'vuex'
import { createNode } from "@/plugins/api.js";
export default {
    components: { personnelDialog, roleDialog,memberDialog },
    props: ["nodeInfo"],
    data() {
        return {
          appoint:false, // 选择人员
          appoint1:false, // 选择角色
          appoint2:false, // 选择部门
          makeUserIdList:[], // 抄送人id列表
          makeUserList:[], // 抄送人姓名列表
          type:1, // 用来判断是抄送人还是审核人
          idList:[], //用来传给选择成员组件的当前选择的id
          idList1:[], //用来传给选择部门组件的当前选择的id
          roleIdList:[], //用来传给选择角色，部门组件的当前选择的id
          roleInfoList:[],//接收传过来的成员对象数组
          roleInfoList1:[],//接收传过来的角色对象数组
          roleInfoList2:[],//接收传过来的部门对象数组
          
          diaType:0, // 选择的是角色还是部门
          auditMode:"1",
        }
    },
    computed: {
        ...mapState(['promoterDrawer', 'flowPermission1','dataList','showLoading','showZZ','showEdit']),
    },
    watch: {
        

    },
    mounted(){
      if(this.showZZ||this.showEdit){
        let appointList = this.nodeInfo.auditType // 回显选择人员的方式
        console.log(appointList,'--------审核方式')
        let userPermissionSpecific = this.nodeInfo.userPermissionSpecific // 回显选择人员的具体人员
        if(appointList.indexOf("指定成员")!=-1){
          this.appoint = true
          this.roleInfoList = userPermissionSpecific.designatedPerson
          let memberIdList = userPermissionSpecific.memberIdList
          this.idList = memberIdList
          
        }
        if(appointList.indexOf("指定角色")!=-1){
          this.appoint1 = true
          this.roleInfoList1 = userPermissionSpecific.designatedRoles
          this.roleIdList = this.roleInfoList1
          
        }
        if(appointList.indexOf("指定部门")!=-1){
          this.appoint2 = true
          this.roleInfoList2 = userPermissionSpecific.designatedDepartments
          this.idList1 = []
          this.roleInfoList2.map((item)=>{
            this.idList1.push(item.id)
          })
        }
      }
      
    },
    methods: {
        ...mapMutations(['setPromoter', 'setFlowPermission']),
        addPromoter() {
            this.checkedList = this.flowPermission
            this.promoterVisible = true;
        },
        surePromoter(data) {
            this.flowPermission = data;
            this.promoterVisible = false;
        },
        savePromoter() {
          if(!this.showZZ){
            let auditType = []
            this.$store.state.showLoading = true;
            if(this.appoint){
              auditType.push('指定成员')
            }
            if(this.appoint1){
              auditType.push('指定角色')
            }
            if(this.appoint2){
              auditType.push('指定部门')
            }
            this.dataList[0].auditType = auditType // 发起人类型
            this.dataList[0].userPermissionSpecific.examineType = this.auditMode // 审核方式
            this.dataList[0].userPermissionSpecific.designatedPerson = this.roleInfoList // 指定成员
            this.dataList[0].userPermissionSpecific.memberIdList = this.idList // 指定成员的组织架构id
            this.dataList[0].userPermissionSpecific.designatedRoles = this.roleInfoList1 // 指定角色
            this.dataList[0].userPermissionSpecific.designatedDepartments = this.roleInfoList2 // 指定部门
            this.dataList[0].userIdList = this.roleInfoList.concat(this.roleInfoList1).concat(this.roleInfoList2) // 审核人员
            console.log(this.nodeInfo,23232323)
            createNode({
              "processNodeSpecific":this.nodeInfo,
              "userPermissionSpecific":this.nodeInfo.userPermissionSpecific,
              "actionSpecificList":[]
            }).then((data)=>{
              this.nodeInfo.key = data.key
              this.$store.state.showLoading = false;
              this.closeDrawer()
            })
          }else{
            this.closeDrawer()
          }
          
          
        },
        closeDrawer() {
          this.setPromoter(false)
        },
        showDialog(type,diaType){ // 显示选择审核人组件
          this.type = type
          this.diaType = diaType

          if(diaType==0){ // 选择成员
            this.$refs.memberDialog.isMemberDialog = true
            this.$refs.personnel.isPersonnel = false
            this.$refs.role.isRole = false
          }else if(diaType==1){ // 选择角色
            console.log(this.idList1,'--------------选中的角色id')
            this.$refs.memberDialog.isMemberDialog = false
            this.$refs.personnel.isPersonnel = false
            this.$refs.role.isRole = true
          }else if(diaType==2){ // 选择部门
            this.$refs.memberDialog.isMemberDialog = false
            this.$refs.personnel.isPersonnel = true
            this.$refs.role.isRole = false
          }



          // if(diaType==0){ //打开成员
          //   if(type==1){ // 选择审核人
          //     // this.idList = ...(this.roleInfoList.id)
          //   }else{ // 选择抄送人
          //     console.log(this.makeUserIdList,'--------------this.makeUserIdList--------------')
          //     this.idList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = true
          //   this.$refs.personnel.isPersonnel = false
          //   this.$refs.role.isRole = false
          // }else if(diaType==2){ //打开部门
          //   if(type==1){ // 选择审核人
          //     this.roleIdList = this.roleInfoList2
              
          //     console.log(this.roleIdList,'--------------this.roleIdList--------------')
          //   }else{ // 选择抄送人
              
          //     this.roleIdList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = false
          //   this.$refs.personnel.isPersonnel = true
          //   this.$refs.role.isRole = false
          // }else { //打开角色
          //   if(type==1){ // 选择审核人
          //     if(this.diaType==0){
          //       this.roleIdList = this.roleInfoList
          //     }else if(this.diaType==1){
          //       this.roleIdList = this.roleInfoList1
          //     }else if(this.diaType==2){
          //       this.roleIdList = this.roleInfoList2
          //     }
              
          //     console.log(this.roleIdList,'--------------this.roleIdList1--------------')
          //   }else{ // 选择抄送人
              
          //     this.roleIdList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = false
          //   this.$refs.personnel.isPersonnel = false
          //   this.$refs.role.isRole = true
          // }
          
          
        },
        selectListFun(val){ // 处理已选择的成员id，给组件传参用
          this.roleInfoList = val[0]
          this.idList = []
          val[1].map((item)=>{
            this.idList.push(item.id)
          })
          
        },
        selectListFun1(val){ // 处理已选择的成员id，给组件传参用
          
          this.roleInfoList2 = val
          this.idList1 = []
          val.map((item)=>{
            this.idList1.push(item.id)
          })
        },
        selectListFun2(val){ // 处理已选择的角色
          this.roleInfoList1 = val
        },
        
        

    }
}
</script>
<style lang="less" scoped >
.set_promoter {
    .promoter_content {
        padding: 0 20px;

        .el-button {
            margin-bottom: 20px;
        }

        p {
            padding: 18px 0;
            font-size: 14px;
            line-height: 20px;
            color: #000000;
        }
    }
}
.padding_box{
  padding: 20px;
}
.flex_box{
  display: flex;
  align-items: center;
}
.lable_box{
  margin-right: 20px;
  min-width: 80px;
}
.list{
  padding-left: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.personnel_box{
  font-size: 14px;
  margin-top: 10px;
}
.personnel_box>span{
  margin-right: 10px;
}
.flex_box{
  display: flex;
  align-items: center;
}
.lable_box{
  margin-right: 20px;
  min-width: 80px;
  font-size: 16px;
}
.footer{
  position: absolute;
  bottom: 30px;
  right: 40px;
}

.appr_box{
  width: 100%;
  height: auto;
  padding: 20px;
}
.top{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.list{
  box-sizing: border-box;
  margin-bottom: 20px;
}
.personnel_box{
  font-size: 14px;
  margin-top: 10px;
}
.personnel_box>span{
  margin-right: 10px;
}
.footer{
  position: fixed;
  bottom: 30px;
  right: 20px;
}
.box-card{
  margin-bottom: 20px;
  font-size: 16px;
  color: #409EFF;
}
.icon{
  margin-right: 10px;
  color: #222;
}
.lable_box1{
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.tag_box{
  margin: 5px;
}
.condition_list{
  font-size: 12px;
  color: #222;
}
.operator_box{
  width: 80px;
  margin: 0 10px;
}
.condition_inp{
  width: 200px;
}
.btn_qx{
  margin-left: 30px;
}
.zz{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  z-index: 99999;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>